<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
  var app= angular.module('myApp', ['ngMap']);
  app.controller('AerialRotateCtrl', function($scope, $interval, NgMap) {
    var vm = this;
    NgMap.getMap().then(function(map) {
      vm.map = map;
    });

    vm.autoRotate = function() {
      if (vm.map.getTilt() != 0) {
        $interval(function() {
          var heading = vm.map.getHeading() || 0;
          vm.map.setHeading(heading + 90);
        }, 3000);
      }
    }
  });
</script>
</head>

<body>
  <div ng-controller="AerialRotateCtrl as vm">
    <input type="button" value="Auto Rotate" ng-click="vm.autoRotate();">
    <ng-map center="45.518970, -122.672899"
      zoom="18"
      map-type-id="SATELLITE"
      tilt="45"
      heading="90">
    </ng-map>
  </div>
</body>
</html>
